.elementor-1150 .elementor-element.elementor-element-e0f5667{--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-1150 .elementor-element.elementor-element-e0f5667::before, .elementor-1150 .elementor-element.elementor-element-e0f5667 > .elementor-background-video-container::before, .elementor-1150 .elementor-element.elementor-element-e0f5667 > .e-con-inner > .elementor-background-video-container::before, .elementor-1150 .elementor-element.elementor-element-e0f5667 > .elementor-background-slideshow::before, .elementor-1150 .elementor-element.elementor-element-e0f5667 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1150 .elementor-element.elementor-element-e0f5667 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#0000008C;--background-overlay:'';}.elementor-1150 .elementor-element.elementor-element-edaa484{--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-1150 .elementor-element.elementor-element-edaa484.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-fd2d43e .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e33f13e .elementor-icon-wrapper{text-align:center;}.elementor-1150 .elementor-element.elementor-element-e33f13e.elementor-view-stacked .elementor-icon{background-color:#FFFFFF00;}.elementor-1150 .elementor-element.elementor-element-e33f13e.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-e33f13e.elementor-view-default .elementor-icon{color:#FFFFFF00;border-color:#FFFFFF00;}.elementor-1150 .elementor-element.elementor-element-e33f13e.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-e33f13e.elementor-view-default .elementor-icon svg{fill:#FFFFFF00;}.elementor-1150 .elementor-element.elementor-element-e33f13e .elementor-icon{font-size:16px;}.elementor-1150 .elementor-element.elementor-element-e33f13e .elementor-icon svg{height:16px;}.elementor-1150 .elementor-element.elementor-element-cd858ba .elementor-heading-title{font-size:18px;font-weight:600;line-height:26px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-9c02316{margin:24px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-9c02316 .elementor-heading-title{font-size:60px;font-weight:600;line-height:64px;letter-spacing:-0.02em;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-21ba61e{--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:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:072px;--padding-bottom:0px;--padding-left:30px;--padding-right:30px;}.elementor-1150 .elementor-element.elementor-element-3b6f29b{--e-image-carousel-slides-to-show:5;}.elementor-1150 .elementor-element.elementor-element-3b6f29b .swiper-wrapper{display:flex;align-items:center;}.elementor-1150 .elementor-element.elementor-element-f13465a{--display:flex;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6{width:var( --container-widget-width, 594px );max-width:594px;margin:60px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--container-widget-width:594px;--container-widget-flex-grow:0;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6.elementor-element{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .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-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#303879;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .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-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#E71E26;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .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-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-1150 .elementor-element.elementor-element-59145d0{margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;padding:10px 0px 0px 0px;text-align:center;color:#000000;}.elementor-1150 .elementor-element.elementor-element-59145d0 p{margin-block-end:10px;}.elementor-1150 .elementor-element.elementor-element-5339534{--display:flex;}.elementor-1150 .elementor-element.elementor-element-2b280b0{--display:flex;}.elementor-1150 .elementor-element.elementor-element-47b9e72{--display:flex;}.elementor-1150 .elementor-element.elementor-element-b83bbfd{--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-1150 .elementor-element.elementor-element-b83bbfd:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b83bbfd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-b83bbfd.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-9656dcd{--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-1150 .elementor-element.elementor-element-9656dcd:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-9656dcd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-9656dcd.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-14ade47{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-14ade47 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-2e9fd95{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-2e9fd95 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3a52e40 .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-1150 .elementor-element.elementor-element-3a52e40 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-3a52e40 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3a52e40{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-1150 .elementor-element.elementor-element-3a52e40 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-3a52e40 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-909bc30{--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-1150 .elementor-element.elementor-element-909bc30:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-909bc30 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-909bc30.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-a386e81{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-a386e81 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-5435aec{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-5435aec .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8cfecaf .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-1150 .elementor-element.elementor-element-8cfecaf .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-8cfecaf .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8cfecaf{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-1150 .elementor-element.elementor-element-8cfecaf .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-8cfecaf .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4cdfe52{--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-1150 .elementor-element.elementor-element-4cdfe52:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-4cdfe52 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-4cdfe52.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-8039de8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-8039de8 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-bbd2e4e{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-bbd2e4e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2c557e2 .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-1150 .elementor-element.elementor-element-2c557e2 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-2c557e2 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2c557e2{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-1150 .elementor-element.elementor-element-2c557e2 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-2c557e2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8b0e1c3{--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-1150 .elementor-element.elementor-element-8b0e1c3:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-8b0e1c3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-8b0e1c3.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-db8040f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-db8040f img{width:100%;}.elementor-1150 .elementor-element.elementor-element-00702ca{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-00702ca .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7315055 .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-1150 .elementor-element.elementor-element-7315055 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7315055 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7315055{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-1150 .elementor-element.elementor-element-7315055 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7315055 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b6b13b8{--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-1150 .elementor-element.elementor-element-b6b13b8:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b6b13b8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-b6b13b8.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-41c91d0{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-41c91d0 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-29d6dfb{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-29d6dfb .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-154742f .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-1150 .elementor-element.elementor-element-154742f .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-154742f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-154742f{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-1150 .elementor-element.elementor-element-154742f .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-154742f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b5e61f1{--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-1150 .elementor-element.elementor-element-b5e61f1:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b5e61f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-b5e61f1.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-0669434{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-0669434 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-0753d96{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-0753d96 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-c99f1d9 .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-1150 .elementor-element.elementor-element-c99f1d9 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-c99f1d9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-c99f1d9{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-1150 .elementor-element.elementor-element-c99f1d9 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-c99f1d9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b5bc30f{--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-1150 .elementor-element.elementor-element-b5bc30f:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b5bc30f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-b5bc30f.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-8e9557e{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-8e9557e img{width:100%;}.elementor-1150 .elementor-element.elementor-element-7782ae9{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-7782ae9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e750ba3 .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-1150 .elementor-element.elementor-element-e750ba3 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e750ba3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e750ba3{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-1150 .elementor-element.elementor-element-e750ba3 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e750ba3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-18519d1{--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-1150 .elementor-element.elementor-element-18519d1:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-18519d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-18519d1.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-04e9bff{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-04e9bff img{width:100%;}.elementor-1150 .elementor-element.elementor-element-9d15d30{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-9d15d30 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-76ec89d .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-1150 .elementor-element.elementor-element-76ec89d .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-76ec89d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-76ec89d{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-1150 .elementor-element.elementor-element-76ec89d .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-76ec89d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-475de75{--display:flex;}.elementor-1150 .elementor-element.elementor-element-68c4f8b{--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-1150 .elementor-element.elementor-element-68c4f8b:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-68c4f8b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-68c4f8b.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-5431def{--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-1150 .elementor-element.elementor-element-5431def:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-5431def > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-5431def.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-989bd14{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-989bd14 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-79fd9f6{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-79fd9f6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-5065716 .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-1150 .elementor-element.elementor-element-5065716 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-5065716 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-5065716{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-1150 .elementor-element.elementor-element-5065716 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-5065716 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ebe4598{--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-1150 .elementor-element.elementor-element-ebe4598:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-ebe4598 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-ebe4598.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-668895b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-668895b img{width:100%;}.elementor-1150 .elementor-element.elementor-element-46bbff9{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-46bbff9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ae40591 .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-1150 .elementor-element.elementor-element-ae40591 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-ae40591 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ae40591{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-1150 .elementor-element.elementor-element-ae40591 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-ae40591 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ae62388{--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-1150 .elementor-element.elementor-element-ae62388:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-ae62388 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-ae62388.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-8653c50{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-8653c50 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-c97ff1c{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-c97ff1c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cdee4b0 .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-1150 .elementor-element.elementor-element-cdee4b0 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-cdee4b0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cdee4b0{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-1150 .elementor-element.elementor-element-cdee4b0 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-cdee4b0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-77bf5ee{--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-1150 .elementor-element.elementor-element-77bf5ee:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-77bf5ee > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-77bf5ee.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-f782689{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-f782689 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-f93b2af{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-f93b2af .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3c201e6 .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-1150 .elementor-element.elementor-element-3c201e6 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-3c201e6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3c201e6{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-1150 .elementor-element.elementor-element-3c201e6 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-3c201e6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7b4ad77{--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-1150 .elementor-element.elementor-element-7b4ad77:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7b4ad77 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7b4ad77.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-2cd5c6d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-2cd5c6d img{width:100%;}.elementor-1150 .elementor-element.elementor-element-65caf46{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-65caf46 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8f05a38 .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-1150 .elementor-element.elementor-element-8f05a38 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-8f05a38 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8f05a38{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-1150 .elementor-element.elementor-element-8f05a38 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-8f05a38 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ccd1c64{--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-1150 .elementor-element.elementor-element-ccd1c64:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-ccd1c64 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-ccd1c64.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-acb62bd{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-acb62bd img{width:100%;}.elementor-1150 .elementor-element.elementor-element-cc49315{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-cc49315 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d96efd7 .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-1150 .elementor-element.elementor-element-d96efd7 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-d96efd7 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d96efd7{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-1150 .elementor-element.elementor-element-d96efd7 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-d96efd7 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3cce501{--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-1150 .elementor-element.elementor-element-3cce501:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-3cce501 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-3cce501.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-16f044f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-16f044f img{width:100%;}.elementor-1150 .elementor-element.elementor-element-9a05576{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-9a05576 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8d0d7a0 .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-1150 .elementor-element.elementor-element-8d0d7a0 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-8d0d7a0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8d0d7a0{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-1150 .elementor-element.elementor-element-8d0d7a0 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-8d0d7a0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e55a41e{--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-1150 .elementor-element.elementor-element-e55a41e:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-e55a41e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-e55a41e.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-4c43f24{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-4c43f24 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-37094f3{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-37094f3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-aeee8ba .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-1150 .elementor-element.elementor-element-aeee8ba .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-aeee8ba .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-aeee8ba{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-1150 .elementor-element.elementor-element-aeee8ba .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-aeee8ba .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-5a46e98{--display:flex;}.elementor-1150 .elementor-element.elementor-element-d6b7f44{--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-1150 .elementor-element.elementor-element-d6b7f44:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-d6b7f44 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-d6b7f44.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-31564b7{--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-1150 .elementor-element.elementor-element-31564b7:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-31564b7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-31564b7.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-2638898{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-2638898 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-343a5c4{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-343a5c4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-bdd8755 .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-1150 .elementor-element.elementor-element-bdd8755 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-bdd8755 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-bdd8755{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-1150 .elementor-element.elementor-element-bdd8755 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-bdd8755 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-9f1f2e2{--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-1150 .elementor-element.elementor-element-9f1f2e2:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-9f1f2e2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-9f1f2e2.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-209ac80{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-209ac80 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-5573d9d{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-5573d9d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-614d7e2 .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-1150 .elementor-element.elementor-element-614d7e2 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-614d7e2 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-614d7e2{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-1150 .elementor-element.elementor-element-614d7e2 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-614d7e2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-c98759f{--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-1150 .elementor-element.elementor-element-c98759f:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-c98759f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-c98759f.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-d52408f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-d52408f img{width:100%;}.elementor-1150 .elementor-element.elementor-element-1739581{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-1739581 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-419bdf0 .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-1150 .elementor-element.elementor-element-419bdf0 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-419bdf0 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-419bdf0{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-1150 .elementor-element.elementor-element-419bdf0 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-419bdf0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-66906a6{--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-1150 .elementor-element.elementor-element-66906a6:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-66906a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-66906a6.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-f78b3da{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-f78b3da img{width:100%;}.elementor-1150 .elementor-element.elementor-element-670f39e{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-670f39e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3f28935 .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-1150 .elementor-element.elementor-element-3f28935 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-3f28935 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3f28935{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-1150 .elementor-element.elementor-element-3f28935 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-3f28935 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3f2406c{--display:flex;}.elementor-1150 .elementor-element.elementor-element-2f596c5{--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-1150 .elementor-element.elementor-element-2f596c5:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-2f596c5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-2f596c5.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-ed89dff{--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-1150 .elementor-element.elementor-element-ed89dff:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-ed89dff > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-ed89dff.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-c350100{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-c350100 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-3321cc3{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-3321cc3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-9df408d .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-1150 .elementor-element.elementor-element-9df408d .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-9df408d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-9df408d{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-1150 .elementor-element.elementor-element-9df408d .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-9df408d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-785641a{--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-1150 .elementor-element.elementor-element-785641a:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-785641a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-785641a.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-68b2631{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-68b2631 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-fca31bd{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-fca31bd .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-22a1c56 .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-1150 .elementor-element.elementor-element-22a1c56 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-22a1c56 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-22a1c56{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-1150 .elementor-element.elementor-element-22a1c56 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-22a1c56 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-9ac8608{--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-1150 .elementor-element.elementor-element-9ac8608:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-9ac8608 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-9ac8608.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-ca022ee{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-ca022ee img{width:100%;}.elementor-1150 .elementor-element.elementor-element-ee3f6b7{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-ee3f6b7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e4624f8 .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-1150 .elementor-element.elementor-element-e4624f8 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e4624f8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e4624f8{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-1150 .elementor-element.elementor-element-e4624f8 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e4624f8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e16f47d{--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-1150 .elementor-element.elementor-element-e16f47d:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-e16f47d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-e16f47d.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-0cede61{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-0cede61 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-924760f{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-924760f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-69a419e .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-1150 .elementor-element.elementor-element-69a419e .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-69a419e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-69a419e{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-1150 .elementor-element.elementor-element-69a419e .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-69a419e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-13d844e{--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-1150 .elementor-element.elementor-element-13d844e > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-13d844e.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-1150 .elementor-element.elementor-element-13d844e.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-13d844e.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-1150 .elementor-element.elementor-element-13d844e.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-1150 .elementor-element.elementor-element-13d844e [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-1150 .elementor-element.elementor-element-c01a8cf{--display:flex;}.elementor-1150 .elementor-element.elementor-element-12c4797{--display:flex;}.elementor-1150 .elementor-element.elementor-element-a78c462{--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-1150 .elementor-element.elementor-element-a78c462:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-a78c462 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-a78c462.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-1722b94{--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-1150 .elementor-element.elementor-element-1722b94:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-1722b94 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-1722b94.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-5d11bdd{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-5d11bdd img{width:100%;}.elementor-1150 .elementor-element.elementor-element-4c9af40{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-4c9af40 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7ce390d .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-1150 .elementor-element.elementor-element-7ce390d .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7ce390d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7ce390d{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-1150 .elementor-element.elementor-element-7ce390d .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7ce390d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e46fb7a{--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-1150 .elementor-element.elementor-element-e46fb7a:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-e46fb7a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-e46fb7a.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-44f7c34{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-44f7c34 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-7fb53cb{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-7fb53cb .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-58abdec .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-1150 .elementor-element.elementor-element-58abdec .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-58abdec .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-58abdec{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-1150 .elementor-element.elementor-element-58abdec .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-58abdec .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d04d61e{--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-1150 .elementor-element.elementor-element-d04d61e:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-d04d61e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-d04d61e.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-a55f605{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-a55f605 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-d610194{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-d610194 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f999991 .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-1150 .elementor-element.elementor-element-f999991 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-f999991 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f999991{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-1150 .elementor-element.elementor-element-f999991 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-f999991 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ae6bb50{--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-1150 .elementor-element.elementor-element-ae6bb50:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-ae6bb50 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-ae6bb50.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-e3b67b6{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-e3b67b6 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-0c0c568{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-0c0c568 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-74f4df3 .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-1150 .elementor-element.elementor-element-74f4df3 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-74f4df3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-74f4df3{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-1150 .elementor-element.elementor-element-74f4df3 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-74f4df3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-743fa01{--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-1150 .elementor-element.elementor-element-743fa01:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-743fa01 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-743fa01.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-39c9ce7{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-39c9ce7 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-4a2ef20{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-4a2ef20 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d08b374 .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-1150 .elementor-element.elementor-element-d08b374 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-d08b374 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d08b374{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-1150 .elementor-element.elementor-element-d08b374 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-d08b374 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2d722d6{--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-1150 .elementor-element.elementor-element-2d722d6:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-2d722d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-2d722d6.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-5a54c14{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-5a54c14 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-78fb661{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-78fb661 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7ad0c8b .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-1150 .elementor-element.elementor-element-7ad0c8b .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7ad0c8b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7ad0c8b{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-1150 .elementor-element.elementor-element-7ad0c8b .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7ad0c8b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-565dd0a{--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-1150 .elementor-element.elementor-element-565dd0a:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-565dd0a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-565dd0a.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-b150673{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-b150673 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-8a7a50d{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-8a7a50d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0ff8886 .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-1150 .elementor-element.elementor-element-0ff8886 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-0ff8886 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0ff8886{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-1150 .elementor-element.elementor-element-0ff8886 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-0ff8886 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6af0a1d{--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-1150 .elementor-element.elementor-element-6af0a1d:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6af0a1d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6af0a1d.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-1a3cdcf{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-1a3cdcf img{width:100%;}.elementor-1150 .elementor-element.elementor-element-277532a{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-277532a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f20e599 .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-1150 .elementor-element.elementor-element-f20e599 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-f20e599 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f20e599{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-1150 .elementor-element.elementor-element-f20e599 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-f20e599 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cdc3383{--display:flex;}.elementor-1150 .elementor-element.elementor-element-b647971{--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-1150 .elementor-element.elementor-element-b647971:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b647971 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-b647971.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-af9ac3a{--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-1150 .elementor-element.elementor-element-af9ac3a:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-af9ac3a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-af9ac3a.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-d642e79{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-d642e79 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-e6e8913{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-e6e8913 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e71179a .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-1150 .elementor-element.elementor-element-e71179a .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e71179a .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e71179a{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-1150 .elementor-element.elementor-element-e71179a .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e71179a .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6cd98cd{--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-1150 .elementor-element.elementor-element-6cd98cd:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6cd98cd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6cd98cd.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-be39906{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-be39906 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-d678b80{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-d678b80 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a804bb8 .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-1150 .elementor-element.elementor-element-a804bb8 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-a804bb8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a804bb8{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-1150 .elementor-element.elementor-element-a804bb8 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-a804bb8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3427669{--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-1150 .elementor-element.elementor-element-3427669:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-3427669 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-3427669.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-918f001{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-918f001 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-e440c28{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-e440c28 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-45aa146 .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-1150 .elementor-element.elementor-element-45aa146 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-45aa146 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-45aa146{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-1150 .elementor-element.elementor-element-45aa146 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-45aa146 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6f7ddf9{--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-1150 .elementor-element.elementor-element-6f7ddf9:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6f7ddf9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6f7ddf9.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-f11df3b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-f11df3b img{width:100%;}.elementor-1150 .elementor-element.elementor-element-bfd1e04{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-bfd1e04 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-98aec9a .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-1150 .elementor-element.elementor-element-98aec9a .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-98aec9a .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-98aec9a{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-1150 .elementor-element.elementor-element-98aec9a .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-98aec9a .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7e8c00b{--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-1150 .elementor-element.elementor-element-7e8c00b:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7e8c00b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7e8c00b.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-3457b9a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-3457b9a img{width:100%;}.elementor-1150 .elementor-element.elementor-element-a9eacfc{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-a9eacfc .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e56654f .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-1150 .elementor-element.elementor-element-e56654f .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e56654f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e56654f{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-1150 .elementor-element.elementor-element-e56654f .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e56654f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-56a15a3{--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-1150 .elementor-element.elementor-element-56a15a3:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-56a15a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-56a15a3.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-7906bb9{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-7906bb9 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-c1edb1d{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-c1edb1d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b0eb881 .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-1150 .elementor-element.elementor-element-b0eb881 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-b0eb881 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b0eb881{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-1150 .elementor-element.elementor-element-b0eb881 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-b0eb881 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e225f12{--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-1150 .elementor-element.elementor-element-e225f12:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-e225f12 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-e225f12.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-642c1a6{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-642c1a6 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-e09544c{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-e09544c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6f2d63d .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-1150 .elementor-element.elementor-element-6f2d63d .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-6f2d63d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6f2d63d{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-1150 .elementor-element.elementor-element-6f2d63d .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-6f2d63d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a570685{--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-1150 .elementor-element.elementor-element-a570685:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-a570685 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-a570685.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-6a59354{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-6a59354 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-0204299{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-0204299 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-616e181 .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-1150 .elementor-element.elementor-element-616e181 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-616e181 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-616e181{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-1150 .elementor-element.elementor-element-616e181 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-616e181 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-aff1e99{--display:flex;}.elementor-1150 .elementor-element.elementor-element-6150895{--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-1150 .elementor-element.elementor-element-6150895:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6150895 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-6150895.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-55f2833{--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-1150 .elementor-element.elementor-element-55f2833:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-55f2833 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-55f2833.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-8097d4b{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-8097d4b img{width:100%;}.elementor-1150 .elementor-element.elementor-element-47878fe{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-47878fe .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-30827be .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-1150 .elementor-element.elementor-element-30827be .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-30827be .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-30827be{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-1150 .elementor-element.elementor-element-30827be .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-30827be .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8b2863f{--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-1150 .elementor-element.elementor-element-8b2863f:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-8b2863f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-8b2863f.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-cd231ee{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-cd231ee img{width:100%;}.elementor-1150 .elementor-element.elementor-element-748c026{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-748c026 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-48c757e .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-1150 .elementor-element.elementor-element-48c757e .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-48c757e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-48c757e{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-1150 .elementor-element.elementor-element-48c757e .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-48c757e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-606786b{--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-1150 .elementor-element.elementor-element-606786b:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-606786b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-606786b.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-c029abd{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-c029abd img{width:100%;}.elementor-1150 .elementor-element.elementor-element-886b745{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-886b745 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7d49126 .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-1150 .elementor-element.elementor-element-7d49126 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7d49126 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7d49126{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-1150 .elementor-element.elementor-element-7d49126 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7d49126 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6ab6b33{--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-1150 .elementor-element.elementor-element-6ab6b33:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6ab6b33 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6ab6b33.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-456156a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-456156a img{width:100%;}.elementor-1150 .elementor-element.elementor-element-ac4f130{padding:10px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-ac4f130 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:600;line-height:29px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2fcf498 .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-1150 .elementor-element.elementor-element-2fcf498 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-2fcf498 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2fcf498{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-1150 .elementor-element.elementor-element-2fcf498 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-2fcf498 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-60527bc{--display:flex;}.elementor-1150 .elementor-element.elementor-element-a82165c{--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-1150 .elementor-element.elementor-element-a82165c:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-a82165c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-a82165c.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-9e8a40a{--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-1150 .elementor-element.elementor-element-9e8a40a:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-9e8a40a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-9e8a40a.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-5043f8c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-5043f8c img{width:100%;}.elementor-1150 .elementor-element.elementor-element-e415985{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-e415985 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f6106a8 .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-1150 .elementor-element.elementor-element-f6106a8 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-f6106a8 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f6106a8{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-1150 .elementor-element.elementor-element-f6106a8 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-f6106a8 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-211f5a6{--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-1150 .elementor-element.elementor-element-211f5a6:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-211f5a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-211f5a6.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-aef71af{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-aef71af img{width:100%;}.elementor-1150 .elementor-element.elementor-element-c1f3569{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-c1f3569 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7c90f62 .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-1150 .elementor-element.elementor-element-7c90f62 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7c90f62 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7c90f62{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-1150 .elementor-element.elementor-element-7c90f62 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7c90f62 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7b13798{--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-1150 .elementor-element.elementor-element-7b13798:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7b13798 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7b13798.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-0db3341{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-0db3341 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-d4305d4{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-d4305d4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-91e4b49 .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-1150 .elementor-element.elementor-element-91e4b49 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-91e4b49 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-91e4b49{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-1150 .elementor-element.elementor-element-91e4b49 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-91e4b49 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a2a8c1c{--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-1150 .elementor-element.elementor-element-a2a8c1c:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-a2a8c1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-a2a8c1c.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-a2963b2{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-a2963b2 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-1ece963{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-1ece963 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7cb5578 .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-1150 .elementor-element.elementor-element-7cb5578 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7cb5578 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7cb5578{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-1150 .elementor-element.elementor-element-7cb5578 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7cb5578 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a55a385{--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-1150 .elementor-element.elementor-element-a55a385 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a55a385.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-1150 .elementor-element.elementor-element-a55a385.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-a55a385.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-1150 .elementor-element.elementor-element-a55a385.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-1150 .elementor-element.elementor-element-a55a385 [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-1150 .elementor-element.elementor-element-9361af4{--display:flex;}.elementor-1150 .elementor-element.elementor-element-dd654e2{--display:flex;}.elementor-1150 .elementor-element.elementor-element-759c31e{--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-1150 .elementor-element.elementor-element-759c31e:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-759c31e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-759c31e.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-a96cb40{--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-1150 .elementor-element.elementor-element-a96cb40:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-a96cb40 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-a96cb40.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-37f367d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-37f367d img{width:100%;}.elementor-1150 .elementor-element.elementor-element-aa16c66{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-aa16c66 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e9ce38e .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-1150 .elementor-element.elementor-element-e9ce38e .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e9ce38e .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e9ce38e{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-1150 .elementor-element.elementor-element-e9ce38e .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e9ce38e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3548c0e{--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-1150 .elementor-element.elementor-element-3548c0e:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-3548c0e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-3548c0e.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-cb3155f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-cb3155f img{width:100%;}.elementor-1150 .elementor-element.elementor-element-dbdcf9a{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-dbdcf9a .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0a358e3 .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-1150 .elementor-element.elementor-element-0a358e3 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-0a358e3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0a358e3{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-1150 .elementor-element.elementor-element-0a358e3 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-0a358e3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6b9ff97{--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-1150 .elementor-element.elementor-element-6b9ff97:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6b9ff97 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6b9ff97.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-fba8d73{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-fba8d73 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-33ee934{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-33ee934 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-95f4c0b .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-1150 .elementor-element.elementor-element-95f4c0b .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-95f4c0b .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-95f4c0b{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-1150 .elementor-element.elementor-element-95f4c0b .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-95f4c0b .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b00ab82{--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-1150 .elementor-element.elementor-element-b00ab82:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b00ab82 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-b00ab82.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-04bb344{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-04bb344 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-79d4db9{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-79d4db9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-922605d .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-1150 .elementor-element.elementor-element-922605d .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-922605d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-922605d{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-1150 .elementor-element.elementor-element-922605d .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-922605d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cb13d44{--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-1150 .elementor-element.elementor-element-cb13d44:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-cb13d44 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-cb13d44.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-d07fa11{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-d07fa11 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-b29b5b5{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-b29b5b5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7c80183 .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-1150 .elementor-element.elementor-element-7c80183 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-7c80183 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7c80183{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-1150 .elementor-element.elementor-element-7c80183 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-7c80183 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-915388b{--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-1150 .elementor-element.elementor-element-915388b:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-915388b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-915388b.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-4e187b4{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-4e187b4 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-40e8f13{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-40e8f13 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-bcc8a76 .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-1150 .elementor-element.elementor-element-bcc8a76 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-bcc8a76 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-bcc8a76{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-1150 .elementor-element.elementor-element-bcc8a76 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-bcc8a76 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-b817228{--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-1150 .elementor-element.elementor-element-b817228:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-b817228 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-b817228.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-0def681{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-0def681 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-0007c16{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-0007c16 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3c270a6 .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-1150 .elementor-element.elementor-element-3c270a6 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-3c270a6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-3c270a6{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-1150 .elementor-element.elementor-element-3c270a6 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-3c270a6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8186857{--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-1150 .elementor-element.elementor-element-8186857:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-8186857 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-8186857.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-d4638ed{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-d4638ed img{width:100%;}.elementor-1150 .elementor-element.elementor-element-4cbc843{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-4cbc843 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-114c4b1 .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-1150 .elementor-element.elementor-element-114c4b1 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-114c4b1 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-114c4b1{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-1150 .elementor-element.elementor-element-114c4b1 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-114c4b1 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-dd7b370{--display:flex;}.elementor-1150 .elementor-element.elementor-element-d605a83{--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-1150 .elementor-element.elementor-element-d605a83:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-d605a83 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-d605a83.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-4b2b248{--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-1150 .elementor-element.elementor-element-4b2b248:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-4b2b248 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-4b2b248.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-fbe6e6c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-fbe6e6c img{width:100%;}.elementor-1150 .elementor-element.elementor-element-1693994{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-1693994 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f59d123 .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-1150 .elementor-element.elementor-element-f59d123 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-f59d123 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f59d123{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-1150 .elementor-element.elementor-element-f59d123 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-f59d123 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-665df10{--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-1150 .elementor-element.elementor-element-665df10:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-665df10 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-665df10.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-d5b1748{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-d5b1748 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-b0b8760{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-b0b8760 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4d5dc25 .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-1150 .elementor-element.elementor-element-4d5dc25 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-4d5dc25 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4d5dc25{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-1150 .elementor-element.elementor-element-4d5dc25 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-4d5dc25 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6db8872{--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-1150 .elementor-element.elementor-element-6db8872:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6db8872 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6db8872.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-1651fc6{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-1651fc6 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-0e0bf2e{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-0e0bf2e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f6cc4bd .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-1150 .elementor-element.elementor-element-f6cc4bd .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-f6cc4bd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f6cc4bd{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-1150 .elementor-element.elementor-element-f6cc4bd .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-f6cc4bd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7753eb1{--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-1150 .elementor-element.elementor-element-7753eb1:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7753eb1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7753eb1.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-bd337e7{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-bd337e7 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-369371f{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-369371f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e9b5acc .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-1150 .elementor-element.elementor-element-e9b5acc .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e9b5acc .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e9b5acc{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-1150 .elementor-element.elementor-element-e9b5acc .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e9b5acc .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4adec52{--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-1150 .elementor-element.elementor-element-4adec52:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-4adec52 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-4adec52.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-58b4a3f{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-58b4a3f img{width:100%;}.elementor-1150 .elementor-element.elementor-element-3839285{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-3839285 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-633c380 .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-1150 .elementor-element.elementor-element-633c380 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-633c380 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-633c380{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-1150 .elementor-element.elementor-element-633c380 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-633c380 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2e980ce{--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-1150 .elementor-element.elementor-element-2e980ce:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-2e980ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-2e980ce.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-4020ac1{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-4020ac1 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-7905a22{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-7905a22 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8e11836 .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-1150 .elementor-element.elementor-element-8e11836 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-8e11836 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-8e11836{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-1150 .elementor-element.elementor-element-8e11836 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-8e11836 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-800834e{--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-1150 .elementor-element.elementor-element-800834e:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-800834e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-800834e.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-6fe322c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-6fe322c img{width:100%;}.elementor-1150 .elementor-element.elementor-element-6652c91{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-6652c91 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-731988f .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-1150 .elementor-element.elementor-element-731988f .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-731988f .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-731988f{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-1150 .elementor-element.elementor-element-731988f .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-731988f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4795a2a{--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-1150 .elementor-element.elementor-element-4795a2a:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-4795a2a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-4795a2a.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-f0750b8{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-f0750b8 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-401739e{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-401739e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a838ac3 .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-1150 .elementor-element.elementor-element-a838ac3 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-a838ac3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a838ac3{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-1150 .elementor-element.elementor-element-a838ac3 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-a838ac3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-32c081b{--display:flex;}.elementor-1150 .elementor-element.elementor-element-5643ab9{--display:flex;}.elementor-1150 .elementor-element.elementor-element-5982943{--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-1150 .elementor-element.elementor-element-5982943 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-5982943.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-1150 .elementor-element.elementor-element-5982943.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-5982943.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-1150 .elementor-element.elementor-element-5982943.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-1150 .elementor-element.elementor-element-5982943 [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-1150 .elementor-element.elementor-element-ba687f1{--display:flex;}.elementor-1150 .elementor-element.elementor-element-0040a5f{--display:flex;}.elementor-1150 .elementor-element.elementor-element-0c831e4{--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-1150 .elementor-element.elementor-element-0c831e4:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-0c831e4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-0c831e4.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-2e55404{--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-1150 .elementor-element.elementor-element-2e55404:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-2e55404 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-2e55404.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-15578c6{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-15578c6 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-a229753{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-a229753 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-1d90995 .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-1150 .elementor-element.elementor-element-1d90995 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-1d90995 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-1d90995{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-1150 .elementor-element.elementor-element-1d90995 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-1d90995 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-f3ac109{--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-1150 .elementor-element.elementor-element-f3ac109:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-f3ac109 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-f3ac109.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-21c09f9{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-21c09f9 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-272ff9e{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-272ff9e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2cd2a65 .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-1150 .elementor-element.elementor-element-2cd2a65 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-2cd2a65 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2cd2a65{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-1150 .elementor-element.elementor-element-2cd2a65 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-2cd2a65 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-619b00d{--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-1150 .elementor-element.elementor-element-619b00d:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-619b00d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-619b00d.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-3c5a76e{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-3c5a76e img{width:100%;}.elementor-1150 .elementor-element.elementor-element-55b18c1{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-55b18c1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e3a5991 .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-1150 .elementor-element.elementor-element-e3a5991 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e3a5991 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e3a5991{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-1150 .elementor-element.elementor-element-e3a5991 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e3a5991 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0ddbb37{--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-1150 .elementor-element.elementor-element-0ddbb37:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-0ddbb37 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-0ddbb37.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-be3656a{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-be3656a img{width:100%;}.elementor-1150 .elementor-element.elementor-element-4a3683f{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-4a3683f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-55585b4 .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-1150 .elementor-element.elementor-element-55585b4 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-55585b4 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-55585b4{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-1150 .elementor-element.elementor-element-55585b4 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-55585b4 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-baca134{--display:flex;}.elementor-1150 .elementor-element.elementor-element-cb31764{--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-1150 .elementor-element.elementor-element-cb31764:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-cb31764 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-cb31764.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-a1ddcda{--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-1150 .elementor-element.elementor-element-a1ddcda:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-a1ddcda > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-a1ddcda.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-e91f430{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-e91f430 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-7f1c206{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-7f1c206 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-fb2736d .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-1150 .elementor-element.elementor-element-fb2736d .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-fb2736d .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-fb2736d{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-1150 .elementor-element.elementor-element-fb2736d .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-fb2736d .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-6fa303d{--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-1150 .elementor-element.elementor-element-6fa303d:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-6fa303d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-6fa303d.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-60ac43e{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-60ac43e img{width:100%;}.elementor-1150 .elementor-element.elementor-element-02504c1{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-02504c1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ea96e31 .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-1150 .elementor-element.elementor-element-ea96e31 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-ea96e31 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ea96e31{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-1150 .elementor-element.elementor-element-ea96e31 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-ea96e31 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-171e85f{--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-1150 .elementor-element.elementor-element-171e85f:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-171e85f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-171e85f.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-f8a3800{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-f8a3800 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-0f1a81c{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-0f1a81c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-959384c .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-1150 .elementor-element.elementor-element-959384c .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-959384c .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-959384c{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-1150 .elementor-element.elementor-element-959384c .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-959384c .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-fdffecc{--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-1150 .elementor-element.elementor-element-fdffecc:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-fdffecc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-fdffecc.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-98eb0b5{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-98eb0b5 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-289d2e3{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-289d2e3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e050bca .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-1150 .elementor-element.elementor-element-e050bca .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-e050bca .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e050bca{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-1150 .elementor-element.elementor-element-e050bca .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-e050bca .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-174291b{--display:flex;}.elementor-1150 .elementor-element.elementor-element-949a46c{--display:flex;}.elementor-1150 .elementor-element.elementor-element-2adda20{--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-1150 .elementor-element.elementor-element-2adda20 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-2adda20.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-1150 .elementor-element.elementor-element-2adda20.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-2adda20.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-1150 .elementor-element.elementor-element-2adda20.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-1150 .elementor-element.elementor-element-2adda20 [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-1150 .elementor-element.elementor-element-043e7b2{--display:flex;}.elementor-1150 .elementor-element.elementor-element-67a0e70{--display:flex;}.elementor-1150 .elementor-element.elementor-element-21ad9fb{--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-1150 .elementor-element.elementor-element-21ad9fb:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-21ad9fb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-21ad9fb.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-09e43c9{--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-1150 .elementor-element.elementor-element-09e43c9:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-09e43c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-09e43c9.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-a84cab0{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-a84cab0 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-055ff14{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-055ff14 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ecf6688 .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-1150 .elementor-element.elementor-element-ecf6688 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-ecf6688 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ecf6688{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-1150 .elementor-element.elementor-element-ecf6688 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-ecf6688 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7bcbbb2{--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-1150 .elementor-element.elementor-element-7bcbbb2:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7bcbbb2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7bcbbb2.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-f11094c{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-f11094c img{width:100%;}.elementor-1150 .elementor-element.elementor-element-c2704c9{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-c2704c9 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0b37588 .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-1150 .elementor-element.elementor-element-0b37588 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-0b37588 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0b37588{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-1150 .elementor-element.elementor-element-0b37588 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-0b37588 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d5d5b82{--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-1150 .elementor-element.elementor-element-d5d5b82:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-d5d5b82 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-d5d5b82.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-cae97a2{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-cae97a2 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-eaed9be{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-eaed9be .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cc795fd .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-1150 .elementor-element.elementor-element-cc795fd .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-cc795fd .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cc795fd{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-1150 .elementor-element.elementor-element-cc795fd .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-cc795fd .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-0c15165{--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-1150 .elementor-element.elementor-element-0c15165:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-0c15165 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-0c15165.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-fa314a7{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-fa314a7 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-1a90efd{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-1a90efd .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-1f45ddf .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-1150 .elementor-element.elementor-element-1f45ddf .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-1f45ddf .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-1f45ddf{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-1150 .elementor-element.elementor-element-1f45ddf .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-1f45ddf .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-aac2f95{--display:flex;}.elementor-1150 .elementor-element.elementor-element-d1dbf2c{--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-1150 .elementor-element.elementor-element-d1dbf2c:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-d1dbf2c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3c1df16 );}.elementor-1150 .elementor-element.elementor-element-d1dbf2c.e-con{--align-self:flex-end;}.elementor-1150 .elementor-element.elementor-element-050806f{--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-1150 .elementor-element.elementor-element-050806f:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-050806f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-050806f.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-3ed475d{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-3ed475d img{width:100%;}.elementor-1150 .elementor-element.elementor-element-9a92c94{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-9a92c94 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-10765f6 .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-1150 .elementor-element.elementor-element-10765f6 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-10765f6 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-10765f6{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-1150 .elementor-element.elementor-element-10765f6 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-10765f6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7b2d19e{--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-1150 .elementor-element.elementor-element-7b2d19e:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7b2d19e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7b2d19e.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-db3a256{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-db3a256 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-1f9edb7{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-1f9edb7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d5dfb42 .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-1150 .elementor-element.elementor-element-d5dfb42 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-d5dfb42 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d5dfb42{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-1150 .elementor-element.elementor-element-d5dfb42 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-d5dfb42 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7a41316{--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-1150 .elementor-element.elementor-element-7a41316:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-7a41316 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-7a41316.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-31b1c33{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-31b1c33 img{width:100%;}.elementor-1150 .elementor-element.elementor-element-e484af5{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-e484af5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ce32ca3 .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-1150 .elementor-element.elementor-element-ce32ca3 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-ce32ca3 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-ce32ca3{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-1150 .elementor-element.elementor-element-ce32ca3 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-ce32ca3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-83511d5{--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-1150 .elementor-element.elementor-element-83511d5:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-83511d5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-83511d5.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-2dd50ec{padding:0px 0px 0px 0px;border-style:none;border-radius:40px 40px 40px 40px;}.elementor-1150 .elementor-element.elementor-element-2dd50ec img{width:100%;}.elementor-1150 .elementor-element.elementor-element-62e7419{padding:20px 05px 0px 05px;text-align:center;}.elementor-1150 .elementor-element.elementor-element-62e7419 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;line-height:30px;letter-spacing:0px;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-053d0c9 .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-1150 .elementor-element.elementor-element-053d0c9 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-053d0c9 .elementor-button:focus{background-color:var( --e-global-color-primary );color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-053d0c9{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-1150 .elementor-element.elementor-element-053d0c9 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-053d0c9 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4c54865{--display:flex;}.elementor-1150 .elementor-element.elementor-element-fb9b7b6{--display:flex;}.elementor-1150 .elementor-element.elementor-element-9dcb7a9{--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-1150 .elementor-element.elementor-element-9dcb7a9 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-9dcb7a9.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-1150 .elementor-element.elementor-element-9dcb7a9.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-9dcb7a9.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-1150 .elementor-element.elementor-element-9dcb7a9.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-1150 .elementor-element.elementor-element-9dcb7a9 [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-1150 .elementor-element.elementor-element-12c8bff{--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-1150 .elementor-element.elementor-element-12c8bff > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#001D8C;}.elementor-1150 .elementor-element.elementor-element-12c8bff.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-1150 .elementor-element.elementor-element-12c8bff.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-12c8bff.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-1150 .elementor-element.elementor-element-12c8bff [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-1150 .elementor-element.elementor-element-b0d421b{margin-top:25px;margin-bottom:25px;padding:20px 0px 20px 0px;}.elementor-1150 .elementor-element.elementor-element-3e6ef11 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-1150 .elementor-element.elementor-element-4928472{width:100%;max-width:100%;margin:20px 0px calc(var(--kit-widget-spacing, 0px) + 40px) 0px;}.elementor-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-1150 .elementor-element.elementor-element-4928472 .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-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#E71E26;}.elementor-1150 .elementor-element.elementor-element-4928472 .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-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#001D8C;}.elementor-1150 .elementor-element.elementor-element-4928472 .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-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-1150 .elementor-element.elementor-element-755f703{padding:10px 0px 20px 0px;text-align:center;color:#000000;}.elementor-1150 .elementor-element.elementor-element-755f703 p{margin-block-end:10px;}.elementor-1150 .elementor-element.elementor-element-97cd696{--display:flex;--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-1150 .elementor-element.elementor-element-94a1a2d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1150 .elementor-element.elementor-element-04d0b9f{--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;--border-radius:40px 40px 40px 40px;--margin-top:0px;--margin-bottom:0px;--margin-left:-40px;--margin-right:10px;}.elementor-1150 .elementor-element.elementor-element-f8e852d{--display:flex;--min-height:548px;--border-radius:16px 16px 16px 16px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-f8e852d:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-f8e852d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E71E26;}.elementor-1150 .elementor-element.elementor-element-e0d68c3{text-align:center;}.elementor-1150 .elementor-element.elementor-element-e0d68c3 img{width:100%;height:286px;object-fit:cover;object-position:center center;border-radius:12px 12px 12px 12px;}.elementor-1150 .elementor-element.elementor-element-5273a51{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--icon-box-icon-margin:8px;}.elementor-1150 .elementor-element.elementor-element-5273a51.elementor-element{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-5273a51 .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-5273a51.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-5273a51.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-5273a51.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-5273a51 .elementor-icon{font-size:30px;}.elementor-1150 .elementor-element.elementor-element-5273a51 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:26px;font-weight:600;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-a59f46d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-4e7d757 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:17px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:8px 15px 8px 15px;}.elementor-1150 .elementor-element.elementor-element-4e7d757 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-4e7d757 .elementor-button:focus{background-color:#AB0C2F;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4e7d757{width:var( --container-widget-width, 100% );max-width:100%;margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1150 .elementor-element.elementor-element-4e7d757 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-4e7d757 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7bd0c52{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1150 .elementor-element.elementor-element-4650fae{--display:flex;--min-height:548px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:0px;--margin-left:20px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-4650fae:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-4650fae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E71E26;}.elementor-1150 .elementor-element.elementor-element-53ff68d{text-align:center;}.elementor-1150 .elementor-element.elementor-element-53ff68d img{width:100%;height:286px;object-fit:cover;object-position:center center;border-radius:12px 12px 12px 12px;}.elementor-1150 .elementor-element.elementor-element-39b5525{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--icon-box-icon-margin:8px;}.elementor-1150 .elementor-element.elementor-element-39b5525.elementor-element{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-39b5525 .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-39b5525.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-39b5525.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-39b5525.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-39b5525 .elementor-icon{font-size:30px;}.elementor-1150 .elementor-element.elementor-element-39b5525 .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:26px;font-weight:600;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-d95acd6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-4b35e15 .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:17px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:8px 15px 8px 15px;}.elementor-1150 .elementor-element.elementor-element-4b35e15 .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-4b35e15 .elementor-button:focus{background-color:#AB0C2F;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4b35e15{width:var( --container-widget-width, 100% );max-width:100%;margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1150 .elementor-element.elementor-element-4b35e15 .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-4b35e15 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-e0ecd0e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1150 .elementor-element.elementor-element-bd2c1c2{--display:flex;--min-height:548px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:0px;--margin-left:45px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-bd2c1c2:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-bd2c1c2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E71E26;}.elementor-1150 .elementor-element.elementor-element-bb18adc{text-align:center;}.elementor-1150 .elementor-element.elementor-element-bb18adc img{width:100%;height:286px;object-fit:cover;object-position:center center;border-radius:12px 12px 12px 12px;}.elementor-1150 .elementor-element.elementor-element-e8f325d{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--icon-box-icon-margin:8px;}.elementor-1150 .elementor-element.elementor-element-e8f325d.elementor-element{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-e8f325d .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-e8f325d.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-e8f325d.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-e8f325d.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-e8f325d .elementor-icon{font-size:30px;}.elementor-1150 .elementor-element.elementor-element-e8f325d .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:26px;font-weight:600;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-7a3eea5{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 10px 0px;text-align:center;color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-c3753aa .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:17px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:8px 15px 8px 15px;}.elementor-1150 .elementor-element.elementor-element-c3753aa .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-c3753aa .elementor-button:focus{background-color:#AB0C2F;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-c3753aa{width:var( --container-widget-width, 100% );max-width:100%;margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 20px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1150 .elementor-element.elementor-element-c3753aa .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-c3753aa .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-753e059{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1150 .elementor-element.elementor-element-569291c{--display:flex;--min-height:548px;--border-radius:16px 16px 16px 16px;--margin-top:0px;--margin-bottom:0px;--margin-left:70px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-569291c:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-569291c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E71E26;}.elementor-1150 .elementor-element.elementor-element-bac50d3{text-align:center;}.elementor-1150 .elementor-element.elementor-element-bac50d3 img{width:100%;height:286px;object-fit:cover;object-position:center center;border-radius:12px 12px 12px 12px;}.elementor-1150 .elementor-element.elementor-element-35ac0bb{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--icon-box-icon-margin:8px;}.elementor-1150 .elementor-element.elementor-element-35ac0bb.elementor-element{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-35ac0bb .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-35ac0bb.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-35ac0bb.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-35ac0bb.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-35ac0bb .elementor-icon{font-size:30px;}.elementor-1150 .elementor-element.elementor-element-35ac0bb .elementor-icon-box-description{font-family:"DM Sans", Sans-serif;font-size:26px;font-weight:600;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-4317679{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;color:var( --e-global-color-secondary );}.elementor-1150 .elementor-element.elementor-element-825ae5e .elementor-button{background-color:#001D8C;font-family:"DM Sans", Sans-serif;font-size:17px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-radius:40px 40px 40px 40px;padding:8px 15px 8px 15px;}.elementor-1150 .elementor-element.elementor-element-825ae5e .elementor-button:hover, .elementor-1150 .elementor-element.elementor-element-825ae5e .elementor-button:focus{background-color:#AB0C2F;color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-825ae5e{width:var( --container-widget-width, 100% );max-width:100%;margin:10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1150 .elementor-element.elementor-element-825ae5e .elementor-button:hover svg, .elementor-1150 .elementor-element.elementor-element-825ae5e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-18ba17b{--display:flex;}.elementor-1150 .elementor-element.elementor-element-68bf371{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;padding:0px 0px 20px 0px;--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-1150 .elementor-element.elementor-element-68bf371 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#001D8C;}.elementor-1150 .elementor-element.elementor-element-68bf371.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-1150 .elementor-element.elementor-element-68bf371.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-1150 .elementor-element.elementor-element-68bf371.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-1150 .elementor-element.elementor-element-68bf371 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:#000000;}.elementor-1150 .elementor-element.elementor-element-100ff6f{--display:flex;}.elementor-1150 .elementor-element.elementor-element-b992330{--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-1150 .elementor-element.elementor-element-5f5f2e3{--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-1150 .elementor-element.elementor-element-4ce7d95{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 12px) 0px;--icon-box-icon-margin:8px;}.elementor-1150 .elementor-element.elementor-element-4ce7d95 .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-4ce7d95 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-1150 .elementor-element.elementor-element-4ce7d95.elementor-view-stacked .elementor-icon{background-color:#02010100;}.elementor-1150 .elementor-element.elementor-element-4ce7d95.elementor-view-framed .elementor-icon, .elementor-1150 .elementor-element.elementor-element-4ce7d95.elementor-view-default .elementor-icon{fill:#02010100;color:#02010100;border-color:#02010100;}.elementor-1150 .elementor-element.elementor-element-4ce7d95 .elementor-icon{font-size:20px;}.elementor-1150 .elementor-element.elementor-element-4ce7d95 .elementor-icon-box-title, .elementor-1150 .elementor-element.elementor-element-4ce7d95 .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-1150 .elementor-element.elementor-element-74a6dac{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text{text-align:center;}.elementor-1150 .elementor-element.elementor-element-74a6dac .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-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text.style-color{color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-74a6dac .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-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-wrapper.style-color .dynamic-text{color:#001D8C;}.elementor-1150 .elementor-element.elementor-element-74a6dac .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-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text svg{z-index:2;}.elementor-1150 .elementor-element.elementor-element-03953e7{--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-1150 .elementor-element.elementor-element-03953e7:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-03953e7 > .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-1150 .elementor-element.elementor-element-cf59757{--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-1150 .elementor-element.elementor-element-cf59757:not(.elementor-motion-effects-element-type-background), .elementor-1150 .elementor-element.elementor-element-cf59757 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1150 .elementor-element.elementor-element-cf59757.e-con{--align-self:center;}.elementor-1150 .elementor-element.elementor-element-a5359cd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 24px) 0px;}.elementor-1150 .elementor-element.elementor-element-a5359cd .elementor-heading-title{font-size:32px;font-weight:600;line-height:40px;letter-spacing:-0.02em;color:#AB0C2F;}.elementor-1150 .elementor-element.elementor-element-a3103c5{--display:flex;--min-height:0px;--margin-top:-140px;--margin-bottom:10px;--margin-left:0px;--margin-right:0px;}.elementor-1150 .elementor-element.elementor-element-6e1876c{margin:00px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}@media(max-width:1366px){.elementor-1150 .elementor-element.elementor-element-b83bbfd{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-68c4f8b{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d6b7f44{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-2f596c5{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-a78c462{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-b647971{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-6150895{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-a82165c{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-759c31e{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d605a83{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-0c831e4{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-cb31764{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-21ad9fb{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d1dbf2c{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-cf59757{--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}}@media(max-width:1024px){.elementor-1150 .elementor-element.elementor-element-e0f5667{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-21ba61e{--padding-top:50px;--padding-bottom:80px;--padding-left:30px;--padding-right:30px;}.elementor-1150 .elementor-element.elementor-element-3b6f29b{--e-image-carousel-slides-to-show:3;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;line-height:1.4em;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;line-height:1.4em;}.elementor-1150 .elementor-element.elementor-element-b83bbfd{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-68c4f8b{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d6b7f44{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-2f596c5{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-a78c462{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-b647971{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-6150895{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-a82165c{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-759c31e{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d605a83{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-0c831e4{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-cb31764{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-21ad9fb{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d1dbf2c{--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-b0d421b{padding:75px 20px 75px 20px;}.elementor-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;}.elementor-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;}.elementor-1150 .elementor-element.elementor-element-f8e852d{--min-height:450px;}.elementor-1150 .elementor-element.elementor-element-e0d68c3 img{height:350px;}.elementor-1150 .elementor-element.elementor-element-4650fae{--min-height:450px;}.elementor-1150 .elementor-element.elementor-element-53ff68d img{height:350px;}.elementor-1150 .elementor-element.elementor-element-bd2c1c2{--min-height:450px;}.elementor-1150 .elementor-element.elementor-element-bb18adc img{height:350px;}.elementor-1150 .elementor-element.elementor-element-569291c{--min-height:450px;}.elementor-1150 .elementor-element.elementor-element-bac50d3 img{height:350px;}.elementor-1150 .elementor-element.elementor-element-b992330{--padding-top:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:50px;}.elementor-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:50px;}.elementor-1150 .elementor-element.elementor-element-03953e7{--min-height:440px;}}@media(max-width:767px){.elementor-1150 .elementor-element.elementor-element-e0f5667{--min-height:0px;--padding-top:80px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-edaa484{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-1150 .elementor-element.elementor-element-9c02316{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1150 .elementor-element.elementor-element-9c02316 .elementor-heading-title{font-size:48px;line-height:1.1em;}.elementor-1150 .elementor-element.elementor-element-21ba61e{--padding-top:40px;--padding-bottom:65px;--padding-left:20px;--padding-right:20px;}.elementor-1150 .elementor-element.elementor-element-3b6f29b{--e-image-carousel-slides-to-show:2;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-2dbe9b6 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-2b280b0{--content-width:1600px;}.elementor-1150 .elementor-element.elementor-element-b83bbfd{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-68c4f8b{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d6b7f44{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-2f596c5{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-a78c462{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-b647971{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-6150895{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-a82165c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-759c31e{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d605a83{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-0c831e4{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-cb31764{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-21ad9fb{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-d1dbf2c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-1150 .elementor-element.elementor-element-b0d421b{padding:50px 20px 50px 20px;}.elementor-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.4em;}.elementor-1150 .elementor-element.elementor-element-4928472 .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.4em;}.elementor-1150 .elementor-element.elementor-element-f8e852d{--min-height:320px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1150 .elementor-element.elementor-element-e0d68c3{text-align:center;}.elementor-1150 .elementor-element.elementor-element-e0d68c3 img{width:400px;height:330px;object-position:center center;}.elementor-1150 .elementor-element.elementor-element-5273a51 .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-5273a51{--icon-box-icon-margin:4px;}.elementor-1150 .elementor-element.elementor-element-5273a51 .elementor-icon-box-description{line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-4650fae{--min-height:320px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1150 .elementor-element.elementor-element-53ff68d{text-align:center;}.elementor-1150 .elementor-element.elementor-element-53ff68d img{width:400px;height:330px;object-position:center center;}.elementor-1150 .elementor-element.elementor-element-39b5525 .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-39b5525{--icon-box-icon-margin:4px;}.elementor-1150 .elementor-element.elementor-element-39b5525 .elementor-icon-box-description{line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-bd2c1c2{--min-height:320px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1150 .elementor-element.elementor-element-bb18adc{text-align:center;}.elementor-1150 .elementor-element.elementor-element-bb18adc img{width:400px;height:330px;object-position:center center;}.elementor-1150 .elementor-element.elementor-element-e8f325d .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-e8f325d{--icon-box-icon-margin:4px;}.elementor-1150 .elementor-element.elementor-element-e8f325d .elementor-icon-box-description{line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-569291c{--min-height:320px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-1150 .elementor-element.elementor-element-bac50d3{text-align:center;}.elementor-1150 .elementor-element.elementor-element-bac50d3 img{width:400px;height:330px;object-position:center center;}.elementor-1150 .elementor-element.elementor-element-35ac0bb .elementor-icon-box-wrapper{align-items:center;}.elementor-1150 .elementor-element.elementor-element-35ac0bb{--icon-box-icon-margin:4px;}.elementor-1150 .elementor-element.elementor-element-35ac0bb .elementor-icon-box-description{line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-b992330{--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text .normal-text{font-size:32px;line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-74a6dac .jeg-elementor-kit.jkit-animated-text .animated-text .dynamic-text{font-size:32px;line-height:1.3em;}.elementor-1150 .elementor-element.elementor-element-cf59757{--width:90% !important;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-1150 .elementor-element.elementor-element-e0f5667{--content-width:1200px;}.elementor-1150 .elementor-element.elementor-element-edaa484{--width:fit-content;}.elementor-1150 .elementor-element.elementor-element-9656dcd{--width:90%;}.elementor-1150 .elementor-element.elementor-element-909bc30{--width:90%;}.elementor-1150 .elementor-element.elementor-element-4cdfe52{--width:90%;}.elementor-1150 .elementor-element.elementor-element-8b0e1c3{--width:90%;}.elementor-1150 .elementor-element.elementor-element-b6b13b8{--width:90%;}.elementor-1150 .elementor-element.elementor-element-b5e61f1{--width:90%;}.elementor-1150 .elementor-element.elementor-element-b5bc30f{--width:90%;}.elementor-1150 .elementor-element.elementor-element-18519d1{--width:90%;}.elementor-1150 .elementor-element.elementor-element-5431def{--width:90%;}.elementor-1150 .elementor-element.elementor-element-ebe4598{--width:90%;}.elementor-1150 .elementor-element.elementor-element-ae62388{--width:90%;}.elementor-1150 .elementor-element.elementor-element-77bf5ee{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7b4ad77{--width:90%;}.elementor-1150 .elementor-element.elementor-element-ccd1c64{--width:90%;}.elementor-1150 .elementor-element.elementor-element-3cce501{--width:90%;}.elementor-1150 .elementor-element.elementor-element-e55a41e{--width:90%;}.elementor-1150 .elementor-element.elementor-element-31564b7{--width:90%;}.elementor-1150 .elementor-element.elementor-element-9f1f2e2{--width:90%;}.elementor-1150 .elementor-element.elementor-element-c98759f{--width:90%;}.elementor-1150 .elementor-element.elementor-element-66906a6{--width:90%;}.elementor-1150 .elementor-element.elementor-element-ed89dff{--width:90%;}.elementor-1150 .elementor-element.elementor-element-785641a{--width:90%;}.elementor-1150 .elementor-element.elementor-element-9ac8608{--width:90%;}.elementor-1150 .elementor-element.elementor-element-e16f47d{--width:90%;}.elementor-1150 .elementor-element.elementor-element-1722b94{--width:90%;}.elementor-1150 .elementor-element.elementor-element-e46fb7a{--width:90%;}.elementor-1150 .elementor-element.elementor-element-d04d61e{--width:90%;}.elementor-1150 .elementor-element.elementor-element-ae6bb50{--width:90%;}.elementor-1150 .elementor-element.elementor-element-743fa01{--width:90%;}.elementor-1150 .elementor-element.elementor-element-2d722d6{--width:90%;}.elementor-1150 .elementor-element.elementor-element-565dd0a{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6af0a1d{--width:90%;}.elementor-1150 .elementor-element.elementor-element-af9ac3a{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6cd98cd{--width:90%;}.elementor-1150 .elementor-element.elementor-element-3427669{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6f7ddf9{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7e8c00b{--width:90%;}.elementor-1150 .elementor-element.elementor-element-56a15a3{--width:90%;}.elementor-1150 .elementor-element.elementor-element-e225f12{--width:90%;}.elementor-1150 .elementor-element.elementor-element-a570685{--width:90%;}.elementor-1150 .elementor-element.elementor-element-55f2833{--width:90%;}.elementor-1150 .elementor-element.elementor-element-8b2863f{--width:90%;}.elementor-1150 .elementor-element.elementor-element-606786b{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6ab6b33{--width:90%;}.elementor-1150 .elementor-element.elementor-element-9e8a40a{--width:90%;}.elementor-1150 .elementor-element.elementor-element-211f5a6{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7b13798{--width:90%;}.elementor-1150 .elementor-element.elementor-element-a2a8c1c{--width:90%;}.elementor-1150 .elementor-element.elementor-element-a96cb40{--width:90%;}.elementor-1150 .elementor-element.elementor-element-3548c0e{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6b9ff97{--width:90%;}.elementor-1150 .elementor-element.elementor-element-b00ab82{--width:90%;}.elementor-1150 .elementor-element.elementor-element-cb13d44{--width:90%;}.elementor-1150 .elementor-element.elementor-element-915388b{--width:90%;}.elementor-1150 .elementor-element.elementor-element-b817228{--width:90%;}.elementor-1150 .elementor-element.elementor-element-8186857{--width:90%;}.elementor-1150 .elementor-element.elementor-element-4b2b248{--width:90%;}.elementor-1150 .elementor-element.elementor-element-665df10{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6db8872{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7753eb1{--width:90%;}.elementor-1150 .elementor-element.elementor-element-4adec52{--width:90%;}.elementor-1150 .elementor-element.elementor-element-2e980ce{--width:90%;}.elementor-1150 .elementor-element.elementor-element-800834e{--width:90%;}.elementor-1150 .elementor-element.elementor-element-4795a2a{--width:90%;}.elementor-1150 .elementor-element.elementor-element-2e55404{--width:90%;}.elementor-1150 .elementor-element.elementor-element-f3ac109{--width:90%;}.elementor-1150 .elementor-element.elementor-element-619b00d{--width:90%;}.elementor-1150 .elementor-element.elementor-element-0ddbb37{--width:90%;}.elementor-1150 .elementor-element.elementor-element-a1ddcda{--width:90%;}.elementor-1150 .elementor-element.elementor-element-6fa303d{--width:90%;}.elementor-1150 .elementor-element.elementor-element-171e85f{--width:90%;}.elementor-1150 .elementor-element.elementor-element-fdffecc{--width:90%;}.elementor-1150 .elementor-element.elementor-element-09e43c9{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7bcbbb2{--width:90%;}.elementor-1150 .elementor-element.elementor-element-d5d5b82{--width:90%;}.elementor-1150 .elementor-element.elementor-element-0c15165{--width:90%;}.elementor-1150 .elementor-element.elementor-element-050806f{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7b2d19e{--width:90%;}.elementor-1150 .elementor-element.elementor-element-7a41316{--width:90%;}.elementor-1150 .elementor-element.elementor-element-83511d5{--width:90%;}.elementor-1150 .elementor-element.elementor-element-04d0b9f{--width:25%;}.elementor-1150 .elementor-element.elementor-element-7bd0c52{--width:25%;}.elementor-1150 .elementor-element.elementor-element-e0ecd0e{--width:25%;}.elementor-1150 .elementor-element.elementor-element-753e059{--width:25%;}.elementor-1150 .elementor-element.elementor-element-b992330{--content-width:1200px;}.elementor-1150 .elementor-element.elementor-element-cf59757{--width:1000px;}}@media(max-width:1366px) and (min-width:768px){.elementor-1150 .elementor-element.elementor-element-cf59757{--width:871px !important;}}@media(max-width:1024px) and (min-width:768px){.elementor-1150 .elementor-element.elementor-element-cf59757{--width:90% !important;}}/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-14ade47 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9656dcd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a386e81 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-909bc30 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8039de8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4cdfe52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db8040f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b0e1c3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-41c91d0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b6b13b8 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0669434 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5e61f1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8e9557e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b5bc30f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04e9bff *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-18519d1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-989bd14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5431def *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-668895b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ebe4598 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8653c50 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae62388 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f782689 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-77bf5ee *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2cd5c6d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b4ad77 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-acb62bd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccd1c64 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-16f044f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3cce501 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4c43f24 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e55a41e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2638898 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-31564b7 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-209ac80 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9f1f2e2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d52408f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c98759f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f78b3da *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-66906a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c350100 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed89dff *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-68b2631 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-785641a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-ca022ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9ac8608 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0cede61 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e16f47d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5d11bdd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1722b94 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-44f7c34 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e46fb7a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a55f605 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d04d61e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e3b67b6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ae6bb50 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-39c9ce7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-743fa01 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5a54c14 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2d722d6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b150673 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-565dd0a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1a3cdcf *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6af0a1d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d642e79 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-af9ac3a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be39906 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6cd98cd *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-918f001 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3427669 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11df3b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6f7ddf9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3457b9a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e8c00b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-7906bb9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-56a15a3 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-642c1a6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e225f12 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6a59354 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a570685 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8097d4b *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-55f2833 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cd231ee *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8b2863f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-c029abd *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-606786b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-456156a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ab6b33 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-5043f8c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-9e8a40a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-aef71af *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-211f5a6 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0db3341 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b13798 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a2963b2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a2a8c1c *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-37f367d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a96cb40 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cb3155f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3548c0e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fba8d73 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6b9ff97 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-04bb344 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b00ab82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d07fa11 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cb13d44 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4e187b4 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-915388b *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-0def681 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b817228 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d4638ed *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8186857 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fbe6e6c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4b2b248 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-d5b1748 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-665df10 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-1651fc6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6db8872 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-bd337e7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7753eb1 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-58b4a3f *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4adec52 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-4020ac1 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e980ce *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-6fe322c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-800834e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f0750b8 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4795a2a *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-15578c6 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2e55404 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-21c09f9 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f3ac109 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3c5a76e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-619b00d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-be3656a *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0ddbb37 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e91f430 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a1ddcda *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-60ac43e *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6fa303d *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f8a3800 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-171e85f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-98eb0b5 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-fdffecc *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-a84cab0 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-09e43c9 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-f11094c *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7bcbbb2 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-cae97a2 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d5d5b82 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa314a7 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-0c15165 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-3ed475d *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-050806f *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db3a256 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7b2d19e *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-31b1c33 *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7a41316 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-2dd50ec *//* ===== Image: rounded top + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px;               /* adjust height to your preference */
  overflow: hidden !important;
  border-top-left-radius: 18px !important;
  border-top-right-radius: 18px !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #fff;            /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;       /* fills the area like Blue Lotus */
  object-position: center top !important; /* favors the top of the image */
  display: block !important;
  border-radius: 0 !important;        /* image itself not rounded (wrapper handles rounding) */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}

/* ===== Image: rounded top & bottom + cover =====
   Add class "inst-media-top" to the image wrapper (Elementor Image widget: Advanced -> CSS Classes)
*/
.inst-media-top {
  display: block !important;
  width: 100% !important;
  height: 190px; /* adjust height to your preference */
  overflow: hidden !important;
  border-radius: 18px !important; /* all corners rounded */
  padding: 0 !important;
  margin: 0 !important;
  background: #fff; /* neutral bg behind logos */
}

/* ensure the actual <img> fills the wrapper and covers */
.inst-media-top img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* fills the area */
  object-position: center top !important; /* favors the top */
  display: block !important;
  border-radius: 0 !important; /* wrapper handles rounding */
}

/* responsive: slightly shorter on smaller screens */
@media (max-width: 1024px) {
  .inst-media-top { height: 150px; }
}
@media (max-width: 480px) {
  .inst-media-top { height: 120px; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-83511d5 *//* ===== Container Hover: add to the card element as class "inst-card-hover" ===== */
.inst-card-hover {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform, box-shadow;
  /* keep existing layout/padding — this only adds animation */
}

.inst-card-hover:hover,
.inst-card-hover:focus-within {
  transform: translateY(-6px) scale(1.02);    /* small lift + subtle scale */
  box-shadow: 0 18px 36px rgba(12,24,48,0.18);
  border-color: rgba(11,102,209,0.08);       /* light accent ring only */
  z-index: 6;                                 /* rise above neighbors */
}

/* keep hover confined on pointer devices; remove forced transforms for keyboard if undesired */
@media (hover: none) {
  .inst-card-hover:hover { transform: none; box-shadow: none; }
}/* End custom CSS */